.addRecord {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  
  :global {
    .toolbar {
      display: flex;
      justify-content: space-between;
      height: 3rem;
      background-color: #fff;
      border-bottom: 1px solid #eee;
      .close {
      }
      .types {
        display: flex;
        width: 6rem;
        font-size: 16px;
        font-weight: 500;
        .outcome,.income {
          flex: 1;
        }
        .outcome.active {
          color: #ff0000;
        }
        .income.active {
          color: #25b87a;
        }
      }
    }
    .category {
      display: flex;
      height: 32rem;
      overflow-y: scroll;
      background-color: #fff;
      .categoryItem {
        width: 5rem;
        height: 2rem;
        text-align: center;
        &.active {
          color: #ff0000;
        }
      }
    }
    .inputArea {
      background-color: #eee;
      .row1 {
        display: flex;
        justify-content: space-between;
        .amount {
          width: 5rem;
          padding-right: 1rem;
          text-align: right;
        }
      }
      .btnsRow {}
      .inputBtns {
        display: flex;
        flex-wrap: wrap;
        .num {
          width: 25%;
          height: 3rem;
          background-color: #fff;
          text-align: center;
          border: 1px solid #eee;
          border-radius: 5px;
          &:hover {
            background-color: #ebf8f8;
          }
        }

      }
    }
  }
}